<!DOCTYPE html>
<html>
	<head>
	<meta content="text/html; charset=utf-8"/>
	<title>Applicatin bar</title>
</head>
<body>

	<div data-role="page" class="type-interior" data-theme="a">
		<div data-role="header" data-theme="a" data-position="fixed" data-tap-toggle="false">
            <span class="ui-app-title">Be inspired by WP8</span>
		    <h1>Application bar</h1>
	    </div>

	<div data-role="content" data-theme="a" >
        <div style="height: 500px;">
        Use the following <em>data-role</em> attribute to specify application bar<br/>
        <h5>
            &lt;div data-role='app-bar' &gt;<br/>
            <span style="padding-right: 10px"></span>&lt;a href='#' data-icon='icon1' &gt; title1 &lt;/a&gt;
            <br/>
            <span style="padding-right: 20px"></span>&lt;ul><br/>
            <span style="padding-right: 20px"></span>&lt;li&gt;&lt;a href='#'>Menu Item 1 &lt;/a&gt;&lt;/li&gt;<br/>
            <span style="padding-right: 20px"></span>&lt;li&gt;&lt;a href='#'>Menu Item 2 &lt;/a&gt;&lt;/li&gt;<br/>
            <span style="padding-right: 10px"></span>&lt;/ul&gt;<br/>
            
            &lt;/div&gt;
        </h5>
        </div>
    </div>
    <div data-role='app-bar' >
        <a href='#' data-icon='demo-help' >help</a>
        <a href='#' data-icon='demo-set' >settings</a>

        <ul>
            <li><a href='#'>Menu Item 1</a></li>
            <li><a href='#'>Menu Item 2</a></li>
            <li><a href='#'>Menu Item 3</a></li>
            <li><a href='#'>Menu Item 4</a></li>
            <li><a href='#'>Menu Item 5</a></li>
            <li><a href='#'>Menu Item 6</a></li>
            <li><a href='#'>Menu Item 7</a></li>
        </ul>
    </div>
</div>
</body>
</html>
